<template>
  <div id="centerBottom">
    <div style="height: 100%;">
      <div class="d-flex jc-center" style="height: 100%;">
        <div class="chart-box" id="distribution_line" :style="{ width: '100%', height: height + 'px' }"></div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入echarts
import tdTheme from "@/api/ops/echart/theme.json"; // 引入默认主题
// import { getElectricLineData } from "@/api/equipment/energy";
export default {
  data() {
    return {
      yesterdayList1: [800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800],
      yesterdayList2: [56, 98, 33, 68, 53, 42, 82, 56, 92, 35, 67, 81],
      yesterdayList3: [192, 219, 253, 198, 275, 262, 293, 277, 212, 145, 277, 213],
      yesterdayList4: [255, 398, 359, 318, 395, 382, 413, 397, 352, 275, 397, 353],
      yesterdayList5: [381, 498, 453, 498, 425, 442, 543, 457, 592, 345, 467, 483],
      yesterdayList6: [483, 553, 554, 525, 689, 565, 612, 597, 628, 503, 505, 611],
      xlabelList: [
        "11月",
        "12月",
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
      ],
    };
  },
  props: {
    height: {
      type: Number,
      default: 100
    }
  },
  watch: {
    height: {
      handler: function (newVal, oldVal) {
        this.$nextTick(() => this.init())
      }
    }
  },
  mounted() {
    // console.log(888888888);
    this.$echarts.registerTheme("tdTheme", tdTheme); // 覆盖默认主题
    this.init();
  },
  methods: {
    handleXlabel(array) {
      let newArray = [];
      array.map((item) => {
        newArray.push(item.xlabel);
      });
      return newArray;
    },
    handleNum(array) {
      let newArray = [];
      array.map((item) => {
        newArray.push(item.num);
      });
      return newArray;
    },
    init() {
      document.getElementById("distribution_line").removeAttribute('_echarts_instance_');
      let worldMapContainer1 = document.getElementById("distribution_line");
      let myLineChart = this.$echarts.init(worldMapContainer1, "tdTheme");
      let option = {
        // title: {
        //   // text: "电能逐时消耗(Kw/h)",
        //   textStyle: {
        //     fontSize: 14,
        //     fontWeight: "normal",
        //     fontStyle: "normal",
        //     fontFamily: "Microsoft YaHei",
        //   },
        // },
        tooltip: {
          trigger: "item",
          // formatter: function (params) {
          //   let str = params.seriesName;
          //   if (params.seriesIndex == 0) {
          //     str += '<br />' + ' 设备数量：' + params.value;
          //   } else if (params.seriesIndex == 1) {
          //     str += '<br />' + ' 月卡收费：' + params.value + '<br />' + ' 临停收费：' + params.value;
          //   } else if (params.seriesIndex == 2) {
          //     str += '<br />' + ' 入户收费：' + params.value + '<br />' + ' 智能产品：' + params.value + '<br />' + ' 生活用品：' + params.value;
          //   } else if (params.seriesIndex == 3) {
          //     str += '<br />' + ' 当月工单：' + params.value;
          //   } else if (params.seriesIndex == 4) {
          //     str += '<br />' + ' 机器人：' + params.value + '<br />' + ' 门禁人脸识别：' + params.value + '<br />' + ' 监控：' + params.value + '<br />' + ' 传感器：' + params.value;
          //   } else if (params.seriesIndex == 5) {
          //     str += '<br />' + ' 水：' + params.value + '<br />' + ' 电：' + params.value;
          //   }
          //   console.log(88888888, params);
          //   return str;
          // },
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "line", // 默认为直线，可选为：'line' | 'shadow'
            lineStyle: {
              // 直线指示器样式设置
              color: "#48b",
              width: 1,
              type: "dashed",
            },
          },
        },
        legend: {
          left: "right",
          top: '25%',
          orient: 'vertical',
          selectorLabel: {
            verticalAlign: 'middle',
            color: "#fff",
          },
          data: ["设备开通", "停车收费", "服务收入", "工单数据", "告警数据", "能源态势"],
        },
        grid: {
          left: 60,
          bottom: 38,
        },
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              // 设置x轴颜色
              color: "#374B87",
            },
          },
          axisLabel: {
            textStyle: {
              // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              color: "#a4a9c7",
            },
          },
          data: this.xlabelList,
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              color: "#a4a9c7",
            },
          },
          splitLine: {//去除网格线
            show: true,
            lineStyle: {
              // 设置x轴颜色
              color: "#304a61",
              type: 'dotted'
            },
          },
        },
        series: [
          {
            name: "设备开通",
            type: "line",
            // stack: "总量",
            symbol: false,
            data: this.yesterdayList1,
            label: {
              show: false,
              position: "top",
              valueAnimation: true,
              color: "#fff",
            },
          },
          {
            name: "停车收费",
            type: "line",
            // stack: "总量",
            symbol: false,
            data: this.yesterdayList2,
            label: {
              show: true,
              position: "top",
              valueAnimation: true,
              color: "#fff",
            },
          },
          {
            name: "服务收入",
            type: "line",
            // stack: "总量",
            symbol: false,
            data: this.yesterdayList3,
            label: {
              show: true,
              position: "top",
              valueAnimation: true,
              color: "#fff",
            },
          },
          {
            name: "工单数据",
            type: "line",
            // stack: "总量",
            symbol: false,
            data: this.yesterdayList4,
            label: {
              show: true,
              position: "top",
              valueAnimation: true,
              color: "#fff",
            },
          },
          {
            name: "告警数据",
            type: "line",
            // stack: "总量",
            symbol: false,
            data: this.yesterdayList5,
            label: {
              show: true,
              position: "top",
              valueAnimation: true,
              color: "#fff",
            },
          },
          {
            name: "能源态势",
            type: "line",
            // stack: "总量",
            symbol: false,
            data: this.yesterdayList6,
            label: {
              show: true,
              position: "top",
              valueAnimation: true,
              color: "#fff",
            },
          },
        ],
      };
      myLineChart.setOption(option);
    },
  },
};
</script>

<style lang="scss">
#centerBottom {
  .bg-color-black {
    // height: 3.28rem;
    height: 100%;
    border-radius: 0.125rem;
  }

  .text {
    color: #c3cbde;
    font-size: 20px;
  }

  .chart-box {
    width: 100% !important;
    // height: 2.8rem;
    height: 100%;
  }
}
</style>
